<template>
    <div>
        <a-modal
         v-model:visible="visible" 
         :title="formState.id?formState.view?'查看':'编辑':'新增'" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="enterprise-add-edit-modal"
         wrapClassName="full-modal"
         width="100%"
         :footer="null"
        >
            <div v-if="visible" style="margin-bottom: 80px;">
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="关键人员">
                        <a-input
                        v-model:value="formState.fgjry"
                        placeholder="请输入关键人员"
                        v-decorator="[
                            'fgjry', { initialValue:formState.fgjry, rules: rules.fgjry}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="人员类型">
                        <a-select
                            :disabled="formState.view?true:false"
                            ref="select"
                            placeholder="请输入人员类型"
                            v-model:value="formState.frylx"
                            >
                            <a-select-option v-for="(item,index) in rylxList" :value="item">{{ item }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="学历">
                        <a-input v-model:value="formState.fxl" placeholder="请输入学历"/>
                    </a-form-item>
                    <a-form-item label="学位">
                        <a-input v-model:value="formState.fxw" placeholder="请输入学历"/>
                    </a-form-item>
                    <a-form-item label="专业">
                        <a-input v-model:value="formState.fzy" placeholder="请输入学历"/>
                    </a-form-item>
                    <a-form-item label="工作经历" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入工作经历"
                            v-model:value="formState.fgzjl"
                            :autosize="{ minRows: 2, maxRows: 10000 }"
                        ></a-textarea>
                    </a-form-item>
                    <a-form-item label="职称">
                        <a-input v-model:value="formState.fzc" placeholder="请输入职称"/>
                    </a-form-item>
                    <a-form-item label="身份证号">
                        <a-input v-model:value="formState.fsfzh" placeholder="请输入身份证号"/>
                    </a-form-item>
                    <a-form-item label="联系电话">
                        <a-input v-model:value="formState.flxdh" placeholder="请输入联系电话"/>
                    </a-form-item>
                    <a-form-item label="邮箱">
                        <a-input v-model:value="formState.fyx" placeholder="请输入邮箱"/>
                    </a-form-item>
                    <a-form-item label="座机号">
                        <a-input v-model:value="formState.fzjh" placeholder="请输入座机号"/>
                    </a-form-item>
                    <a-form-item label="性别">
                        <a-select
                            :disabled="formState.view?true:false"
                            ref="select"
                            placeholder="请选择性别"
                            v-model:value="formState.fxb"
                        >
                            <a-select-option value="男">男</a-select-option>
                            <a-select-option value="女">女</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="备注" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入备注"
                            v-model:value="formState.fbz"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                        ></a-textarea>
                    </a-form-item>
                </a-form>
                <div style="width: 100%;">
                    <table border="1" class="material-table">
                        <tr>
                            <th style="text-align: center;padding: 5px;">文件目录</th>
                            <th style="text-align: center;padding: 5px;">文件清单</th>
                            <th style="text-align: center;padding: 5px;">操作 </th>
                        </tr>
                        <tr v-for="(item,index) in fjxxList" :key="index">
                            <td style="width: 25%;text-align: center;">{{ item.wjml }}</td>
                            <td style="width: 50%;">
                                <div style="display: flex;width: 100%;flex-wrap: wrap;">
                                    <div class="file-td-box" v-for="(term,tIndex) in item.wjList">
                                        <a-icon class="delete-icon-v" type="delete" @click="deleteClick(term)" v-if="!formState.view"/>
                                        <a-icon class="eye-icon-v" type="eye" @click="viewClick(term)" v-if="term.fwjlx == '.pdf' || term.fwjlx == '.png' || term.fwjlx == '.jpg' || term.fwjlx == '.jpeg'"/>
                                        <a-icon class="download-icon-v" type="download" @click="downloadClick(term)"/>
                                        <a-icon class="file-icon-v" type="file-pdf" />
                                        <span>{{ term.fwjxsmc+term.fwjlx }}</span>
                                    </div>
                                </div>
                            </td>
                            <td style="width: 25%;">
                                <div style="display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 5px;" v-if="!formState.view">
                                    <a-upload
                                    :disabled="uploadLoading"
                                    v-if="formState.id"
                                    style="display: inline-block;" 
                                    :beforeUpload="enterpriseBeforeUpload" 
                                    action="" 
                                    @change="enterpriseUpload($event,item,item.wjml)">
                                        <a-button :loading="uploadLoading" style="margin-right: 15px;" class="blue-btn" type="primary" @click="uploadSave">上传</a-button>
                                    </a-upload>
                                    <div v-if="item.wjml == '照片'" style="width: 100%;text-align: center;">
                                        <span style="color: #ed5565;">（请上传图片.png、.jpg、.jpeg）</span>
                                    </div>
                                </div>
                                
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                position: absolute; left: 0;
                bottom: 0; padding: 18px 24px;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
            <serverEditingView ref="serverEditingViewRef" @refreshChange="$event=>{}"/>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import serverEditingView from '@/components/comp-model-series/server-editing-view'
import { queryYwzdByCode,spcyQyInfoqueryGjryWjml,
    spcyQyInfoUploadMoreTypeFile, 
    getFileTypeServe, 
    deleteFileById, 
    getCrossLocalFile, } from './service/index'
import moment from 'moment'
import YchConstant from "@/api/YchConstant";
import blobType from '@/common/blobType'
export default {
    components:{
        compSelector,
        serverEditingView,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fgjry: [{
                    required: true,
                    message: '请输入关键人员',
                    trigger: 'blur',
                }],
            },
            rylxList:[],
            fjxxList:[],
        }
    },
    watch:{

    },
    mounted(){
        queryYwzdByCode().then(res=>{
            if(res.code == 200){
                this.rylxList = res.result
            }else{
                this.$message.warning(res.message)
            }
        })
    },
    methods:{
        getData(val){
            this.formState = {}
            this.formState = val
            //console.log('是否再次获取',val)
            if(val.id){
                this.getFile(val)
            }
            
        },
        getFile(val){
            spcyQyInfoqueryGjryWjml({id:val.id}).then(res=>{
                if(res.code == 200){
                    this.fjxxList = res.result
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    deleteFileById({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.getFile(that.formState)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        viewClick(val){
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcyQyInfo/getCrossLocalFile?id='+val.id
            )
        },
        lookOverClick(val){
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcySqsxWjjl/getCrossLocalFile?id='+val.id
            )
        },
        downloadClick(val){
            var that = this
            var fileName = val.fwjxsmc
            let param = {id:val.id}
            getFileTypeServe({id:val.id}).then(res=>{
                if(res.code == 200){
                    getCrossLocalFile(param).then((data) => {
                        if (!data) {
                            that.$message.warning('文件下载失败')
                            return
                        }else{
                        // if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        //     window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }))
                        // } else {
                            let url = window.URL.createObjectURL(new Blob([data], { type: blobType.type[blobType.suffix.indexOf(val.fwjlx)] }))
                            let link = document.createElement('a')
                            link.style.display = 'none'
                            link.href = url
                            link.setAttribute('download', fileName + val.fwjlx)
                            document.body.appendChild(link)
                            link.click()
                            document.body.removeChild(link) //下载完成移除元素
                            window.URL.revokeObjectURL(url) //释放掉blob对象
                        // }
                        }
                    })
                }
                
            })
        },
        enterpriseBeforeUpload(e){
            return false
        },
        uploadSave(){
            if(!this.formState.id){
                this.handleOk(true,true)
            }
        },
        enterpriseUpload({file},val,type){//
            //console.log(file.name)
            var that = this
            // this.uploadLoading = true
            if(type == '照片'){
                if(!(file.name.indexOf('.png') !== -1 || file.name.indexOf('.jpg') !== -1 || file.name.indexOf('.jpeg') !== -1)){
                    this.$message.warning('请上传图片（.png、.jpg和.jpeg）')
                    return false
                }

            }
            if(typeof file.uid !== 'undefined') {
                // if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
                    const fileData = new FormData();
                    fileData.append("file",file);
                    fileData.append("id",this.formState.id);
                    fileData.append("fwjlx1",val.wjml);
                    
                    spcyQyInfoUploadMoreTypeFile(fileData).then(res => {
                        if(res.code){
                            if(res.code == 200){
                                this.uploadLoading = false
                                that.$message.success(res.message)
                            }else{
                                this.uploadLoading = false
                                that.$message.warning(res.message)
                            }
                            
                        }
                        if(res.byteLength){
                            if(res.code && res.code !== 200){
                                this.uploadLoading = false
                                that.$message.warning('请上传对应文件类型或者联系管理员!')
                            }else{
                                this.uploadLoading = false
                                that.$message.success('上传成功')
                            }
                        }
                        this.getFile(this.formState)
                    })
                // }
                
            }
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{...this.formState,...values},val)
                    }else{
                        this.$emit('addItem',{...this.formState,...values},val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.enterprise-add-edit-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 85px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
}
</style>